<template>
  <!-- 消息提醒-分配勘探点确认页面 -->
  <div class="app-container-add">
    <!-- 功能按钮 -->
    <el-row :gutter="10" class="button-wrap">
      <el-col :span="1.5">
        <el-button icon="el-icon-arrow-left" size="middle" @click="handleReturn()">返回</el-button>
      </el-col>
      <el-col v-if="msgType" :span="1.5">
        <el-button v-clickForbidden icon="el-icon-document-checked" :disabled="single" size="middle" @click="handleComfig(true)">确认</el-button>
      </el-col>
      <el-col v-if="msgType" :span="1.5">
        <el-button v-clickForbidden icon="el-icon-document-delete" :disabled="single" size="middle" @click="handleComfig">拒绝</el-button>
      </el-col>
    </el-row>
    <div ref="mainCont" class="main-content">
      <!-- 表格展示start -->
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        height="680"
        :row-style="rowClass"
        stripe
        class="table-list"
        @selection-change="handleSelectionChange"
        @row-click="rowChecked"
      >
        <el-table-column type="selection" width="38" align="center" />
        <el-table-column type="index" label="序号" width="51" align="center" />
        <el-table-column
          prop="explorationCode"
          label="勘探点编号"
          min-width="160"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="explorationType"
          label="勘探点类型"
          min-width="120"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{row}">
            <span v-if="row.explorationType === '0'">钻探</span>
            <span v-if="row.explorationType === '1'">静探</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="x"
          label="坐标经度"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="y"
          label="坐标纬度"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="elevation"
          label="高程"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="startTime"
          label="开孔时间"
          align="center"
          min-width="150"
        />
        <el-table-column
          prop="endTime"
          label="终孔时间"
          align="center"
          min-width="150"
        />
        <el-table-column
          prop="repair"
          label="补勘"
          align="center"
          min-width="150"
        >
          <template slot-scope="{row}">
            <span v-if="row.repair ==='0'">—</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页-->
      <pagination
        :total="total"
        :page.sync="filters.pageNum"
        :limit.sync="filters.pageSize"
        @pagination="getList"
      />
      <!-- 表格展示end-->
    </div>
  </div>
</template>
<script>
/** 页面接口 start*/
import { listExploration } from '@/api/projectManage/project/exploration'
import { proPersonDistributionExploration, proEquipmentDistributionExploration } from '@/api/PersonalOffice/info/projectPersonal-exploration'
/** 页面接口 end*/
export default {
  data() {
    return {
      msgType: '',
      filters: { // 查询参数
        pageNum: 1,
        pageSize: this.fristPageSize,
        proId: '', // 项目id
        explorationType: '', // 勘探点类型
        explorationCode: '' // 勘探点编号
      },
      /* 列表 start*/
      total: 0, // 分页总条数
      single: true, // 非单个禁用
      selectRow: [], // 高亮样式
      multipleSelection: [], // 选中表格行
      loading: false, // 列表加载
      tableData: [] // 列表数据
      /* 列表 end*/
    }
  },
  mounted() {
    const { msgType } = this.$route.query
    this.msgType = msgType
    this.filters.proId = this.$store.state.basicInfo.proId
    this.status = this.$store.state.basicInfo.proStatus
    this.getList()
  },
  methods: {
    // 审批
    handleComfig(isAgree) {
      const status = isAgree ? '0' : '1'
      const { explorationId, proId, userId, equipmentId } = this.$route.query
      switch (this.msgType) {
        case '022': // 项目人员分配钻孔
          this.approvalReminder(isAgree, proPersonDistributionExploration, { proId, explorationId, userId, consentFlag: status })
          break

        case '032': // 项目设备分配钻孔
          this.approvalReminder(isAgree, proEquipmentDistributionExploration, { proId, explorationId, equipmentId, consentFlag: status })
          break
      }
    },
    // 审批
    approvalReminder(isAgree, methodName, params) {
      if (isAgree) {
        this.$confirm('是否同意审批?', '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '取消'
        }).then(async() => { // 同意审批
          const { code } = await methodName(params)
          if (code === 200) {
            this.msgSuccess('审批成功')
            this.$router.go(-1)
          }
        }).catch(() => {})
      } else { // 审批被拒绝
        this.$prompt('请输入拒绝理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(async({ value }) => {
          const { code } = await methodName({ ...params, remark: value })
          if (code === 200) {
            this.msgSuccess('审批成功')
            this.$router.go(-1)
          }
        }).catch(() => {})
      }
    },
    // 获取列表
    getList() {
      this.loading = true
      listExploration(this.filters).then(res => {
        this.loading = false
        if (res) {
          this.tableData = res.data.rows
          this.total = res.data.total
          // this.addTaleData()
        } else {
          this.msgError(res.message)
        }
      })
    },
    // list表格填充空白行
    addTaleData() {
      if (this.tableData.length < this.fristPageSize) {
        const arr = {}
        this.tableData.push(arr)
        this.addTaleData()
      }
    },
    /* 列表 start*/
    // 单击每行时每行的复选框选中
    rowChecked(row) {
      if (JSON.stringify(row) === '{}') return
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    // 点击表格前面选框时触发的事件
    handleSelectionChange(val) {
      const newValues = val.filter(row => JSON.stringify(row) !== '{}')
      this.multipleSelection = newValues
      this.single = newValues === 0
      val.forEach(item => {
        this.$refs.multipleTable.toggleRowSelection(item, JSON.stringify(item) !== '{}')
      })
      // 高亮
      this.selectRow = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((item, index) => {
          this.selectRow.push(this.tableData.indexOf(item))
        })
      }
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    },
    // 返回
    handleReturn() {
      this.$router.go(-1)
    }
  }

}

</script>

<style>
</style>
